<template>
  <div class="flex justify-between">
    <nested-draggable v-model="list" class="w-full"></nested-draggable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NestedDraggable from './NestedComponent.vue'

const list = ref([
  {
    name: 'item 1',
    children: [
      {
        name: 'item 2',
        children: []
      },
      {
        name: 'item 6',
        children: []
      }
    ]
  },
  {
    name: 'item 3',
    children: [
      {
        name: 'item 4',
        children: []
      }
    ]
  },
  {
    name: 'item 5',
    children: []
  }
])

const arrayTreeAddLevel = (array:any, levelName = 'level', childrenName = 'children') => {
  if (!Array.isArray(array)) return []
    const recursive = (array:any, level = 0) => {
    level++
    return array.map((v:any) => {
      v[levelName] = level
      const child = v[childrenName]
      if (child && child.length) recursive(child, level)
        return v
      })
    }
  return recursive(array)
}

onMounted(() => {
  list.value = arrayTreeAddLevel(list.value)
})
</script>